<%@ page import="com.goal98.team.Constants" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
    <title><g:message code="index.navbutton.tour" default="Take a tour"/> - ${tourPage?.title}</title>
    <style type="text/css">
    .nextButton {
        float: right;
        margin: 15px
    }

    .nextButton a {
        color: #3C8FA7;
    }

    .tour {
        float: left;
        margin: 0px 10px;
        width: 660px
    }

    </style>
</head>
<body>
    %{--<div class="nav">
      <span class="menuButton"><g:link class="create" action="create"><g:message code="activity.new" default="New Activity"/></g:link></span>
    </div>--}%
    <div class="body">
        <h1><g:message code="index.navbutton.tour" default="Take a tour"/></h1>
        <g:if test="${flash.message}">
            <div class="message"><g:message code="${flash.message}" args="${flash.args}" default="${flash.defaultMessage}"/></div>
        </g:if>

        <div>
            <ul class="steps">
                <g:each var="step" in="${steps}" status="i">
                    <li>
                        <a ${step.id == tourPage.id ? 'class=\"on\"' : ''} href="${createLinkTo(dir: '/tour')}/${i == 0 ? '' : i}">${step.title}</a>
                    </li>
                </g:each>
            </ul>
        </div>

        <div class="tour">
            <div id="tourText">
                ${tourPage.text}
            </div>
            <g:ifAnyGranted role="${Constants.ROLE_ADMIN}">
                <g:javascript library="prototype"/>
                <script type="text/javascript">

                    function updateHiddenText() {
                        $('text').value = FCKeditorAPI.GetInstance('text').GetXHTML();
                    }

                    function updateText(transport) {
                        $('tourText').innerHTML = transport.responseJSON.text;
                    }

                    function onSuccess(transport) {
                        alert('Updated');
                        updateText(transport);
                    }
                </script>
                <g:formRemote name="fckForm" url="[action:'saveAjax']" onSuccess="updateText(e);" before="updateHiddenText();">
                    <g:hiddenField name="id" value="${tourPage.id}"/>
                    <fckeditor:config EnterMode="p"/>
                    <div class="fckeditor">
                        <fckeditor:editor
                                name="text"
                                width="100%"
                                height="400"
                                toolbar="Standard"
                                fileBrowser="default">
                            <div>${tourPage.text}</div>
                        </fckeditor:editor>

                    %{--<g:actionSubmit action="saveAjax" value="${message(code:'button.save', 'default':'Save')}"/>--}%
                        <input type="submit" value="${message(code: 'button.save', 'default': 'Save')}"/>
                    </div>
                </g:formRemote>
            </g:ifAnyGranted>
        </div>


        <div style="clear:both"></div>

        <div class="nextButton">
            <g:if test="${next}">
                <a href="${createLinkTo(dir: "/tour")}/${next}" class="vround-btn-core">
                    <g:message code="button.next" default="Next"/>
                </a>
            </g:if>
        </div>
    </div>

</body>
</html>
